<template>
  <view>
    <!-- 选择 -->
    <view class="header-container">
      <view class="header">
        <u-search
          :show-action="false"
          shape="square"
          placeholder="请输入玩法标题"
          v-model="toolTitle"
          search-icon-color="#56d39d"
          bg-color="#fff"
          height="80"
          @clear="handleClear"></u-search>
        <view class="search-btn" @click="handleSearch">搜索</view>
      </view>
    </view>
    <!-- 选择玩法 -->
    <view class="tool-container">
      <view class="tool-content">
        <view v-if="!showFullList" class="tool-left-warp">
          <scroll-view :scroll-y="true" class="scroll-Y">
            <view
              v-for="(item, index) in toolTypeData"
              :key="index"
              class="tool-type-item"
              :class="{
                'active-type': currentType === item.action
              }"
              @click="changeToolType(item.action)">{{ item.title }}</view>
          </scroll-view>
        </view>
        <view class="tool-right-warp">

          <!-- 定制类分类 -->
          <view v-if="picCategoryList && picCategoryList.length > 0 && currentType === 'nationalDayAvatar'" class="tabs-container">
            <u-subsection
              :list="picCategoryList"
              :current="currentTabs"
              bg-color="#f3f7fb"
              active-color="#fff"
              button-color="#56d39d"
              fontSize="24"
              @change="changePicType">
            </u-subsection>
          </view>

          <scroll-view :scroll-y="true" class="scroll-Y" @scrolltolower="loadMore">
            <view v-if="toolListData && toolListData.length" class="list-container">
              <view
                v-for="item in toolListData"
                :key="item.id"
                class="list-item"
                :class="{
                  'list-item2': showFullList
                }">
                <image class="image" :src="item.cover_url"></image>
                <view class="tool-title">{{ item.title }}</view>
                <view v-if="item.showBtn" class="add-btn" @click="hanleAddTool(item)">
                  <u-icon name="plus-circle"></u-icon>
                  <text>添加</text>
                </view>
                <view v-else class="add-btn add-btn2">
                  <u-icon name="checkmark-circle"></u-icon>
                  <text>已添加</text>
                </view>
              </view>
            </view>
            <view v-else-if="showNoData" class="no-data">
              <image style="width: 300rpx;height: 300rpx;"
              src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01CSQqUP2BzNNzcB96v_!!1888948409.png"></image>
              <view class="tip">暂无更多玩法，你有什么好的想法可以跟我们联系哦~</view>
            </view>
          </scroll-view>
        </view>
      </view>
      <!-- 玩法教程 -->
      <view v-if="playVideo" class="play-video-container" @click="show = true">
        <image class="play-icon" src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01mpT14d2BzNSd42jP5_!!1888948409.png"></image>
      </view>
      <!-- 视频弹窗 -->
      <u-modal
        v-model="show"
        mode="center"
        :mask-close-able="true"
        :show-title="false"
        :show-confirm-button="false"
        :show-cancel-button="true"
        cancel-text="关闭"
        border-radius="16"
        width="600">
        <view class="popup-content">
          <view class="video-view">
            <video
              :src="playVideo"
              :webkit-playsinline="true"
              :danmu-btn="false"
              :auto-play="true"
              object-fit="contain"
              poster="https://img.alicdn.com/imgextra/i3/1888948409/O1CN018LIsLB2BzNSdGcUQA_!!1888948409.jpg"
              controls
              class="video-guide">
            </video>
          </view>
        </view>
      </u-modal>
    </view>
  </view>
</template>

<script>
  import ToolList from '@/components/artworksList/toolList.vue'; // 工具玩法
  import config from '@/utils/config';
  import {
    makeToolType,
    makeToolListByToolType,
    batchCreateTool,
    makePicCategoryList
  } from '@/api/artworks';
  export default {
    components: {
      ToolList
    },
    data() {
      return {
        playVideo: config.toolPlayVideo,
        toolTitle: '',
        selectNum: 0,
        author_id: '',
        album_id: '',
        toolListData: [],
        toolTypeData: [],
        currentType: 'recommend',
        pageNum: 1,
        showNoData: false,
        showFullList: false,
        showNoMoreFlag: false,
        show: false,
        picCategoryList: [],
        currentTabs: 0,
      }
    },
    onLoad(options) {
      if (options && options.author_id) {
        this.author_id = options.author_id;
        this.album_id = options.album_id;
        this.queryToolType();
        this.queryPicCategoryList();
        this.getToolListByUserId();
      }
    },
    watch: {
      toolTitle: {
				handler(val, oldValue) {
					if (!val) {
            this.showNoMoreFlag = false;
            this.pageNum = 1;
            this.getToolListByUserId();
          }
				}
      }
    },
    methods: {

      // 搜索
      handleSearch() {
        if (this.toolTitle) {
          this.toolListData = [];
          this.pageNum = 1;
          this.getToolListByUserId('search');
        } else {
          uni.showToast({
            title: '请输入需要查找的标题内容',
            icon: 'none'
          })
        }
      },

      // 清空
      handleClear() {
        this.toolListData = [];
      },

      // 获取玩法列表
      getToolListByUserId(type) {
        console.log(this.toolListData)
        uni.showLoading({
          title: '加载中',
          mask: true
        });
        makeToolListByToolType({
          author_id: this.author_id,
          action_type: type === 'search' ? '' : this.currentType,
          pageNum: this.pageNum,
          title: this.toolTitle,
          pic_type: this.currentType === 'nationalDayAvatar' ? this.picCategoryList[this.currentTabs].picType : ''
        }).then(result => {
          uni.hideLoading();
          if (result && result.data && result.data.records && result.data.records.length > 0) {
            // 已经添加的工具
            let currentToolList = result.data.currentList.length > 0 ? result.data.currentList : [];
            let currentToolObject = {};
            if (currentToolList && currentToolList.length > 0) {
              currentToolList.forEach(item => {
                currentToolObject[item] = item;
              })
            }

            // 工具列表
            let list = type === 'add' ? this.toolListData : [...this.toolListData, ...result.data.records];
            list.forEach(item => {
              if (currentToolObject[item.id]) {
                item.showBtn = false
              } else {
                item.showBtn = true;
              }
            })

            // 是否展示搜索
            if (result.data.searchTitle) {
              this.showFullList = true;
            } else {
              this.showFullList = false;
            }

            // 是否加载更多
            if (this.pageNum === result.data.total_pages) {
              this.showNoMoreFlag = true;
            } else {
              this.pageNum = this.pageNum + 1;
            }
            this.toolListData = list;
            this.showNoData = false;
          } else {
            if (result.data.searchTitle) {
              this.showFullList = true;
            } else {
              this.showFullList = false;
            }

            // 是否加载更多
            if (this.pageNum === result.data.total_pages) {
              this.showNoMoreFlag = true;
            }

            this.showNoData = true;
            this.toolListData = [];
          }
        }).catch(() => {
          uni.hideLoading();
        })
      },

      // 获取玩法分类
      queryToolType() {
        makeToolType().then(result => {
          if (result && result.data) {
            let toolType = [{
              action: 'recommend',
              title: '爆款推荐'
            }, {
              action: 'new',
              title: '最近上新'
            }]
            this.toolTypeData = [ ...toolType, ...result.data ];
          }
        })
      },

      // 获取图文定制分类列表
      queryPicCategoryList() {
        makePicCategoryList().then(result => {
          if (result && result.data) {
            let list = result.data.navList;
            console.log(list)
            list.forEach(item => {
              item.name = item.label;
            })
            this.picCategoryList = list;
          }
        })
      },

      // 切换分类
      changeToolType(action) {
        if (action !== this.currentType) {
          this.showNoMoreFlag = false;
          this.currentType = action;
          this.pageNum = 1;
          this.toolListData = [];
          this.getToolListByUserId();
        }
      },

      // 切换图文分类
      changePicType(index) {
        this.currentTabs = index;
        this.showNoMoreFlag = false;
        this.pageNum = 1;
        this.toolListData = [];
        this.getToolListByUserId();
      },

      // 加载更多
      loadMore() {
        if (!this.showNoMoreFlag) {
          this.getToolListByUserId();
        } else {
          uni.showToast({
            title: '已全部加载完毕',
            icon: 'none'
          })
        }
      },

      // 添加玩法
      hanleAddTool(item) {
        uni.showLoading({
          title: '添加中',
          mask: true
        });
        batchCreateTool({
          toolData: [ item ],
          author_id: this.author_id,
          type: 10,
          cate_id: 5,
          album_id: this.album_id,
        }).then(result => {
          uni.hideLoading();
          if (result && result.data && result.data.length > 0) {
            this.getToolListByUserId('add');
          }
        }).catch(() => {
          uni.hideLoading();
        })
      },
    }
  }
</script>

<style lang="scss">

  page {
    background: $uni-color-primary;
  }

  .header-container{
    position: fixed;
    width: 100%;
    height: 150rpx;
    top: 0;
    left: 0;
    z-index: 99;
    background: $uni-color-primary;
  }

  .header{
    margin: 32rpx 24rpx;
    position: relative;
    display: flex;
    background-color: #fff;
    border-radius: 16rpx;

    .search-btn{
      height: 64rpx;
      width: 100rpx;
      background-color: $uni-color-primary2;
      color: #fff;
      margin: 8rpx 12rpx 0 0;
      text-align: center;
      line-height: 64rpx;
      border-radius: 8rpx;
    }
  }

  .tool-container{
    padding-top: 150rpx;
  }

  .tool-content{
    display: flex;
    position: absolute;
    width: 100%;
    height: calc(100vh - 150rpx);
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;

    .tool-left-warp {
      width: 160rpx;
      min-width: 160rpx;
      height: 100vh;
      background-color: #f5f5f5;

      .tool-type-item {
        text-align: center;
        height: 100rpx;
        line-height: 100rpx;
        position: relative;
      }

      .active-type{
        background-color: #fff;
        color: $uni-color-primary;
        font-weight: bold;
      }

      .active-type::after{
        display: block;
        content: "";
        width: 8rpx;
        height: 50rpx;
        border-radius: 4rpx;
        background-color: $uni-color-primary;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }

      .scroll-Y{
        height: calc(100% - 150rpx);
      }
    }

    .tool-right-warp {
      flex: 1;
      height: 100vh;
      background-color: #fff;

      .scroll-Y{
        height: 100%;
        background-color: #fff;
      }

      .list-container {
        display: flex;
        flex-wrap: wrap;
        padding: 24rpx 0 180rpx 24rpx;
        background-color: #fff;
      }

      .list-item{
        width: 170rpx;
        height: 298rpx;
        position: relative;
        border-radius: 8rpx;
        overflow: hidden;
        margin-right: 16rpx;
        margin-bottom: 16rpx;
        position: relative;

        .image{
          width: 100%;
          height: 100%;
        }

        .tool-title{
          padding: 10rpx;
          font-size: 20rpx;
          color: #fff;
          line-height: 30rpx;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 5;
          background: linear-gradient(0deg, rgba(0,0,0,.1), rgba(0,0,0,.6));
        }

        .add-btn{
          position: absolute;
          left: 0;
          right: 0;
          width: 150rpx;
          bottom: 10rpx;
          height: 48rpx;
          text-align: center;
          color: #fff;
          font-size: 24rpx;
          background-color: $uni-color-primary;
          text-align: center;
          line-height: 48rpx;
          margin: auto;
          border-radius: 10rpx;
          z-index: 5;
        }
        
        .add-btn2{
          background-color: $uni-color-success;
        }
      }

      .list-item2{
        margin-right: 9rpx;
        margin-bottom: 12rpx;
      }
    }
    
    .no-data{
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 22rpx;
      padding-top: 120rpx;
    }
  }

  .play-video-container{
    position: fixed;
    right: 0;
    bottom: 200rpx;
    width: 100rpx;
    height: 100rpx;
    z-index: 999;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .play-icon{
    width: 110rpx;
    height: 110rpx;
  }

  .popup-content{
    padding: 24rpx;
  }

  .video-view{
    width: 100%;
    border-radius: 8rpx;
    min-height: 552rpx;
    background: #000;
    overflow: hidden;
    padding: 0 16px;
    position: relative;

    .video-guide{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .tabs-container{
    padding: 12rpx 24rpx;
  }
</style>
